/* enum */
import { BaseSelectUserComponentNameEnum, BaseSelectUserDefaultLogo, BaseSelectUserSelectedItem, BaseSelectUserTypeIdEnum } from '@src/component/common/BaseSelectUser/model'
/* scss */
import '@src/component/common/BaseSelectUser/components/SelectedPanel/item.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* util */
import { getIsOpenData } from '@src/util/platform'
import { isDepartmentSelectType, isUserSelectType } from '@src/component/common/BaseSelectUser/util'
import { t } from '@src/locales'
import { isFalsy } from '@src/util/type'
/* types */
import { BaseSelectUserSelectedItemType } from '@src/component/common/BaseSelectUser/types'

export type SelectedItemProps = {
  value: BaseSelectUserSelectedItem;
}

export interface SelectedItemSetupState {
  
}

export enum SelectedItemEmitEventNameEnum {
  Input = 'input',
  Remove = 'remove',
}

export type SelectedItemInstance = ComponentInstance & SelectedItemSetupState
export type SelectedItemVM = ComponentRenderProxy<SelectedItemProps> & CommonComponentInstance & SelectedItemInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserSelectedItem,
  emits: [
    SelectedItemEmitEventNameEnum.Input,
    SelectedItemEmitEventNameEnum.Remove,
  ],
  props: {
    value: {
      type: Object as PropType<BaseSelectUserSelectedItem>,
      default: () => ({}),
      require: true
    }
  },
  setup(props: SelectedItemProps, { emit }) {
    
    const onCloseHandler = () => {
      emit(SelectedItemEmitEventNameEnum.Remove, props.value)
    }
    
    const isOpenData = computed(() => getIsOpenData())
    
    const userTypeListName = [t('common.label.createUser'), t('common.label.principalName'), t('common.label.synergiesUser')]
    
    const isUserOpenData = computed(() => {
      return isOpenData.value && isUserSelectType(props.value as unknown as BaseSelectUserSelectedItemType)
    })
    
    const isDepartmentOpenData = computed(() => {
      return isOpenData.value && isDepartmentSelectType(props.value as unknown as BaseSelectUserSelectedItemType)
    })
    
    const isNotOpenData = computed(() => {
      return isFalsy(isOpenData.value) && isFalsy(isUserOpenData.value) && isFalsy(isDepartmentOpenData.value)
    })
    
    const logo = computed(() => {
      
      if (props.value.img) {
        return props.value.img
      }
      
      return BaseSelectUserDefaultLogo[props.value.typeId]
    })
    
    const isDisabled = computed(() => Boolean(props.value?.disabled))
    
    const isClosable = computed(() => isFalsy(isDisabled.value))

    return {
      logo,
      onCloseHandler,
      isUserOpenData,
      isDepartmentOpenData,
      isNotOpenData,
      isClosable
    }
    
  },
  methods: {
    getTypeName(val: any, type: any) {
      const userType:any = {
        1: t('common.label.createUser'),
        3: t('common.label.synergiesUser'),
        2: t('common.label.principalName'),
      }
      if (type == 1) {
        return userType[val]
      } else {
        let userTypeName: any[] = []
        val.forEach((element: any) => {
          userTypeName.push(userType[element])
        });
        return userTypeName.join('、')
      }
    }
  },

  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserSelectedItem} 
      >
        
        <el-tag
          disable-transitions
          closable={this.isClosable}
          type="info"
          key={this.value.id}
          onClose={this.onCloseHandler}
        >
          
          {this.logo && (
            <img src={this.logo} />
          )}
          
          {this.isUserOpenData && (
            <open-data type="userName" openid={this.value.staffId}>
            </open-data>
          )}
          
          {this.isDepartmentOpenData && (
            <open-data type="departmentName" openid={this.value.name}>
            </open-data>
          )}
          
          {(!this.isUserOpenData && !this.isDepartmentOpenData) && (
            <span title={this.value.name}>
              {this.value.name}
            </span>
          )}
          
        </el-tag>
        
      </div>
    )
  }
})
